Deploy Previewについて
背景
プルリクエストのレビューには時間がかかる
開発の基本的な流れ
チケットの起票&アサイン→コードの修正→プルリクエスト作成→レビュー(ここの部分の話)→RequestChanges or Approve → ApproveならSTG環境などに反映後の内容を確認依頼
レビュー
レビューって何やってます？
コードレビュー(これは必須)
実際にローカルで確認(ここはやってる？)
ローカルで確認
実際に起動してビューを確認したい
ローカルのブランチ無駄に増やしたくないし、やっぱりいちいちそのためだけにpullするのは面倒くさい
umamichi.icon 分かるー。案件が多いとproject切り替えも大変ですよね😢
例えば画面のレビューもする
プルリクのブランチは git pull
ライブラリが新規追加されてたらnpm install などでインストール
起動コマンドを実行して localhostを立ち上げ修正内容を確認
プルリクで修正内容をしっかり確認するならここまでやる必要がある
数人で開発してて時間がない状態やレビュアーが少ない状態だとコードレビューだけ
修正内容のスクリーンショットやGIFの添付でレビュアーに上記の手間を省かせることはできるが、他の人の環境でも正しく動作しているかまでは出来ない
Deploy Previewで解決できる点
レビュアーがローカルに落とす手間が無くなる
見た目や動作の確認だけしてもらいたい場合、非エンジニア(デザイナーなど)意外にもレビュー 依頼ができる
エンジニア同士でデザインチェックしてマージしても、デザイナーチェックで修正が入る場合がある
プレビューでマージされる前に確認してもらえるので、デザインが違ったりうまく動作しないパターンがここで防げる
DeployPreviewができる代表的なサービス
DeployPreviewにおいて必要な機能
プルリクエストでの連携
プルリクエストを作成したタイミングで、ブランチごとのページのURLが生成される(サービス上で、ビルド&デプロイ)
Github Bitbucket GitLabなどの主要なリポジトリのホスティングと連携できる
Vercel
Netlify
どちらもホスティングサービス。今回話してるDeployPreviewはこれらのサービスで使えるおまけ機能
Vercel、Netlifyどちらもリポジトリと連携したらデフォルトでPRを作成したらURLが発行されてPreviewで、確認できるようになる
Netlifyだと、settingsでDeploy previewsの項目が「Any pull request against your production branch / branch deploy branches」になっていると発行される(OFFにもできる)
VercelはsettingsでPreviewオフにする機能は無い模様
実際にプルリクエストと連携した例
Netlifyの例
https://gyazo.com/3eed34b852303cbffc9ac8c64705ab27
Vercelの例
https://gyazo.com/b32eb87347819294b8ffd997935043db
無料枠でどれだけできるのか？
無料枠での共通点と特徴
連携できるリポジトリは無制限
hostingできるリポジトリは制限しない
ただしビルドなどに制限がある
Vercelは、1日あたり100回のビルドを超えるとビルドができなくなる、従量課金は無し
Netlifyは、ビルド時間が無料枠の(300min/month)を超えると従量課金していく
無料枠でのVercelとNetlifyの違い
Basic認証
Vercelだと無料枠でも利用できる。NetlifyだとPRO(月19ドル)からのみ利用できる。
料金体制について
Vercel
無料は個人アカウントのみ。GitHub Organizations にあるリポジトリからのデプロイはProプランへの加入が必要
Proプランだと1メンバーあたり$20
ただしチームが最大10人まで
それ以上で使う場合はEnterprise(値段は要相談)
Netlify
無料は個人アカウントのみ。1メンバー増やすごとに$15(ビルド300分/月なので増やしていくとキツイ)
Proプランだと1メンバーあたり$19
Proプランでは人数制限は書かれてないのでおそらく無制限
人数制限がなくても増やしすぎたらビルド1000分/月までなので増やしすぎたらすぐ消えそう
Amplify Console
AWSのAmplifyのサービスの一部
AWSのAmplify Consoleでも上記の機能は実現できる
Vercel、Netlifyと同様プルリクからプレビューの確認ができる
ただしAWSのサービスなので個人利用でもお金がかかる(AWSの1年間の無料利用枠が残ってれば無料)
案件でAWSが用意されていればいちいち請求先を分けなくていいので上記のNetlifyとかに比べれば導入はしやすそう
あとAWS IAMで人数増えてもそれに伴った課金にならない
Amplifyの料金は
ビルド & デプロイ
$0.01/ビルド1分あたり
ホスティング
ストレージ 1 GB あたり $0.023/月
ホスティングサービス 1 GB あたり$0.15
参考リンク
まとめ
Vercel、Netlify
個人や趣味で少人数での開発などに使うならアリ
組織で規模の大きい人数で利用すると結構値段がかかる...
Amplify
開発でAWSを使ってるなら導入しやすい
値段も上記より安くなりそう
個人開発で使うメリットはあまり無さそう
TJ.icon Netlify build + deploy 時間 (20画面ぐらい)
https://gyazo.com/d6921d8824edd088cfc97fd5e1fa03e1
TJ.icon 初めて vercel を使う時は 552日前です。😂
https://gyazo.com/78b25f9ca6fb8fbe4614e220f2199827
👍 Thaddeus Jiang TJ.icon がいいねしました on 2020/9/9
👍 umamichi umamichi.icon がいいねしました on 2020/9/9